import { Modal, Form, Input } from 'antd';
import { useEffect } from 'react';
import { useSelector } from 'umi';

import type { AllReduxState } from '@/pages/ProOrder';
import { phoneNumReg } from '@/util/utils';
interface Props {
  isModalVisible: boolean;
  handleOk: (a: any) => void;
  handleCancel: () => void;
}
export interface ComEditState {
  saasUserId: string;
  companyName: string;
  companyContact: string;
  companyContactPhone: string;
  companyAddress: string;
  companyIndustry: string;
  companyStuffNumber: number;
  uscCode: string;
}
export default function EditModal(props: Props) {
  const { isModalVisible, handleOk, handleCancel } = props;
  const userInfo: any = useSelector<AllReduxState>((state) => state.GLOBAL_DATA.userInfo);
  const [form] = Form.useForm();
  useEffect(() => {
    form.setFieldsValue({
      companyName: userInfo?.companyName,
      companyContact: userInfo?.companyContact,
      companyContactPhone: userInfo?.companyContactPhone,
      companyAddress: userInfo?.companyAddress,
      companyIndustry: userInfo?.companyIndustry,
      companyStuffNumber: userInfo?.companyStuffNumber,
      uscCode: userInfo?.uscCode,
    });
  }, []);
  return (
    <>
      <Modal title="编辑企业信息" visible={isModalVisible} onOk={() => handleOk(form)} onCancel={handleCancel}>
        <Form
          name="editCoInfo"
          autoComplete="off"
          form={form}
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
        >
          <Form.Item
            label="企业名称"
            name="companyName"
            rules={[{ required: true, message: '请输入企业名称!' }]}
          >
            <Input placeholder={'请输入企业名称'} />
          </Form.Item>

          <Form.Item
            label="联系人"
            name="companyContact"
            rules={[{ required: true, message: '请填写联系人!' }]}
          >
            <Input placeholder={'请填写联系人'} />
          </Form.Item>
          <Form.Item
            label="手机号"
            name="companyContactPhone"
            rules={[{ required: true, message: '请填写手机号!' }, { pattern: phoneNumReg(), message: '请输入正确的手机号' }]}
          >
            <Input  placeholder={'请填写手机号'} />
          </Form.Item>
          <Form.Item
            label="地址"
            name="companyAddress"
            rules={[{ required: true, message: '请填写地址' }]}
          >
            <Input placeholder={'请填写地址'} />
          </Form.Item>
          <Form.Item
            label="所属行业"
            name="companyIndustry"
            rules={[{ required: true, message: '请填写所属行业' }]}
          >
            <Input placeholder={'请填写所属行业'} />
          </Form.Item>
          <Form.Item
            label="公司员工数"
            name="companyStuffNumber"
            rules={[{ required: true, message: '请填写公司员工数!' }]}
          >
            <Input placeholder={'请填写公司员工数'} />
          </Form.Item>
          <Form.Item
            label="社会统一信用代码"
            name="uscCode"
            rules={[{ required: true, message: '社会统一信用代码!' }]}
          >
            <Input placeholder={'请填写社会统一信用代码'}  />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
}
